 
@import "../../style/iconfont.scss";

$img-width:120px;
$primary-color:rgba(244, 129, 31, 1);

$prefixCls:'sp-component-newshopitem';

.#{$prefixCls}{
    
    padding:0 16px;
    background-color: white;
    display: flex;

    &.in-shoplist{

        flex-direction: column;
        padding:32px 16px;
        @include hairline(#DDDDDD,0,bottom);

        .#{$prefixCls}-top{
            display: flex;
        }
        .#{$prefixCls}-good-list{

            margin-top:18px; 
            white-space: nowrap; 
            overflow-y: auto;
            font-size:0;//解决inline-block空白间隙问题
            display: flex; 
            
            &.fill{
                justify-content: space-between;
            }
    
            .good-item{
               
                display: inline-block;
                width: 218px; 
                
                &:not(:first-child){
                    margin-left:16px;
                }

                .img{
                    width: 218px;
                    height: 218px;
                    border-radius: 16px;
                    border: 1px solid #DDDDDD;
                    display: block; 
                }
                .name{
                    @include multi-ellipsis(2);
                    font-size: 24px;
                    font-weight: 400;
                    color:rgba(34, 34, 34, 1);
                    margin-top:4px;
                }
                .price{
                    margin-top:12px;
                    display: flex;  
                    align-items: flex-start;
    
                    .margin{
                        width:8px;
                    }
                }
            }
        }
    }

    &.in-shoplist-last{
        margin-bottom: 48px;
    } 
    
    &.in-store-index{
        border-radius: 16px;
        padding:24px 16px;
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;
    }

    &-left{
        width:$img-width;
        height: $img-width;
        flex-grow: 0;
        flex-shrink: 0;
        margin-right:24px;  
        border-radius: 16px;
        border: 1px solid #DDDDDD;
        overflow: hidden; 
 

        .img{
            width:$img-width;
            height: $img-width;
            display: block;  

        }
    }

    &-right{

        flex:1;
        padding-top:2px;

        &-top{ 

            .lineone{ 
                
                display: flex;
                justify-content: space-between;

                .title{
                    width:454px;
                    @include multi-ellipsis(1);
                    font-size: 30px;
                    font-weight: 600;
                    color: #222222;
                }

                .distance{
                    font-size: 28px;
                    font-weight: 400;
                    color: #666666;
                }
            }

            .linetwo{

                margin-top:16px;
                display: flex;
                justify-content: space-between;
                
                .info{
                    font-size: 22px;
                    font-weight: 400;
                    color: #666666;

                    .sale{
                        margin-left:16px;
                    }
                }

                .distribute{
                    line-height: 1;
                }
            }

            
        }

        &-bottom{
            .activity-line-one{
                margin-top:14px; 
            }
            .activity-line-one, .activity-line-two{
                display: flex;
                
                .left{
                    width: 550px;
                    flex-shrink: 0;
                    flex-grow: 0;
                }
                .right{
                    flex:1;
                    .right-arrow{
                        height: 40px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
                        .iconfont{
                            font-size: 20px;
                            
                            &.expand{
                               transform:rotate(180deg);
                            }
                        } 
                    }
                }
                
            } 
            .discount{
                margin-bottom:8px;
                .label{ 

                    display: flex;
                    
                    .name{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 66px;
                        height: 34px;
                        background: linear-gradient(174deg, #F31346 0%, #FF4A4A 100%);
                        color:white;
                        font-size: 22px;
                        font-weight: 600;
                        border-radius: 2px;
                    }

                    .msg{ 
                        flex:1;
                        @include multi-ellipsis(1);
                        font-size: 24px;
                        font-weight: 400;
                        color: #999999;
                        margin-left: 8px;
                    }

                } 
                &.noDiscount{
                    margin-top:14px;
                }
            }
            
        }
        
    }

    &-header{

        display: flex;
        flex:1;

        .left{
            width:100px;
            flex-grow: 0;
            flex-shrink: 0;
            height: 100px;
            margin-right:24px;
           
            .img{
                width:100px;
                height: 100px;
                border-radius: 16px;
                border: 1px solid #DDDDDD;
                overflow: hidden;
            }
        }

        .center{
            flex:1;
            padding:4px 24px;
            padding-left:0;
            text-align: left;
            .name{
                font-weight: 600;
                color: #111111;
                font-size: 30px;
                display:flex;
                align-items: center;
                .text{
                    @include multi-ellipsis(1);
                    // flex:1;
                }
                .iconfont{
                    width:16px;
                    flex-grow: 0;
                    flex-shrink: 0;
                    margin-left: 16px;
                }
                
            }
            .rate{
                margin-top:8px;
                font-size: 22px;
                font-weight: 400;
                color: #666666;

                .sale{
                    margin-left:16px;
                }
            }
        }

        .right{
            width:180px;
            flex-grow: 0;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .button{
                height: 44px;
                display: flex;
                align-items: center;
                padding:0 16px;
                color:$primary-color;
                font-size: 24px;
                font-weight: 600;
                border-radius: 22px;
                border: 1px solid #F4811F;

                .text{
                    display: flex;
                    align-items: center;
                }
            }
        }
    }

    &-logo{
        margin-top: 16px;
        border-radius: 16px;
        overflow: hidden;

        .img{
            width: 100%;
            display: block;
        }
    }

    

}
